<template>
  <!--注意现在这是侧边栏-->
  <div class="main">
    <el-scrollbar class="left-scrollbar">
      <el-aside :width="isz ? '64px' : '210px'" class="c">
        <el-menu class="el-menu-vertical-demo" :unique-opened="true" :collapse-transition="false" :router="true"
          :default-active="apath">
          <template>
            <div style="display: flex; justify-content: center; align-items: center; height: 60px;">
              <transition name="el-zoom-in-center">
                <p :key="text" style="color: orchid; text-align: center;" v-show="isVisible">{{ text }}</p>
              </transition>
            </div>
          </template>
          <!--一级菜单-->
          <div class="full-height2">
            <el-menu class="full-height">
              <el-submenu :index="item.u_juriid + ''" v-for="item in ADate" :key="item.u_juriid">
                <template slot="title">
                  <i :class="iconobj[item.u_juriid]"></i>
                  <span>{{ item.u_jurname }}</span>
                </template>
                <el-menu-item :index="item3.u_juraddress + ''" v-for="item3 in item.ulist" :key="item3.u_juriid"
                  v-on:click="djtz(item3.u_juraddress)">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{ item3.u_jurname }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </el-menu>
      </el-aside>
    </el-scrollbar>
  </div>
</template>

<script>
import $http from '@/http/base';
export default {
  name:'MainVue',
  data() {
    return {
      isVisible: true,
      text: '天瑞仓库',
      src: '/WHOM_SelectZB',
      uid: '2',
      activeIndex: '1',
      activeIndex2: '1',
      isz: false,
      //侧边栏信息
      ADate: [],
      iconobj: {
        "1": "el-icon-location-outline",
      },
      // 被激活的链接地址
      apath: "",
      //权限数据
      list2: []
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    delayToggle() {
      // 切换 show2 的值
      this.show2 = !this.show2;

      // 设置一个延迟，10秒后再次调用 delayToggle 方法
      setTimeout(() => {
        this.delayToggle();
      }, 5000); // 10000毫秒 = 10秒
    },

    //侧边栏信息
    CeBianlan() {
      $http
        .get('api/qx/CeBianlanSelect?jid=' + this.uid)
        .then(res => {
          this.ADate = res;
          console.log("侧边栏信息")
          console.log(this.ADate)
        })
        .catch(err => {
          this.TiShiSB("查询");
          console.log(err);
        })
    },
    //跳转页面
    djtz(res) {
      this.src = res;
      console.log("this.src:" + this.src)
      this.$router.push(this.src);
    },
    //操作提示 --失败
    TiShiSB(xx) {
      this.$message.error(xx + '失败');
    },
  },
  mounted() {
    setInterval(() => {
      this.isVisible = !this.isVisible;
      setTimeout(() => {
        this.text = this.text === '仓储管理系统' ? '欢迎您的光临' : '仓储管理系统';
        this.isVisible = !this.isVisible;
      }, 2000);
    }, 5000);

    this.CeBianlan();
  },
}
</script>

<style scoped>
.left-scrollbar{
  height: 100vh;
  width: 100%;
}

.container {
  display: flex;
}

.half-width {
  flex: 1;
  display: flex;
  height: 220px;
  /* 设置宽度为300像素 */
  width: 100%;
  background-color: white;
}

.inner-half {
  flex: 1;
  height: 100%;
  /* 设置内部div的高度 */
  border-radius: 5px;
  /* 可选，为内部div设置圆角 */
}

/* 这里可以定义你的过渡效果 */
.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
  transition: opacity 0.5s;
}

.el-zoom-in-center-enter,
.el-zoom-in-center-leave-to {
  opacity: 0;
}

el-main {
  padding: 30px;
  /* 为每个方向添加10像素的边距 */
}

div.no-margin {
  height: 300px;
  /* 设置宽度为300像素 */
  width: 100%;
  background-color: white;
}

.transition-box {

  width: 100%;
  height: 60px;
  border-radius: 4px;
  background-color: white;
  text-align: center;

  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

.el-header,
.el-footer {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.full-height {
  display: flex;
  flex-direction: column;
  height: 93vh;

}

.el-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* 确保在其他内容上方显示 */
}

.full-height2 {
  height: 100%;
  overflow-y: auto;
  /* 添加滚动条，如果内容超出屏幕高度 */
}
</style>